<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title{
            color:red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>你是一只小小小小鸟，怎么飞也飞不高!</div>
</body>
<script>
    const div = document.querySelector("div");
    {
        // 1- 直接增加属性:在DOM结构中是看不到的，存放在内存当中
        // div.index = 100;
        // 获取
        // console.log(div)
    }
    {
        // 2- 增加到DOM元素（结构）上的，在内存中没有。
        // div.setAttribute("index",200);
        // console.log(div.index);// undefined
        // console.log(div.getAttribute("index"));// 200
    }
    {
        // 3- class
        // div.className = "title";
    }
    {
        // 4- style
        // div.style.color="green";
        // div.style.fontSize="30px";

        const obj = {
            color:"pink",
            fontSize:"40px"
        }
        // div.style = obj;// 不行
        {
            // 解决1
            // for(let key in obj){
            //     div.style[key] = obj[key];
            // }

            // 解决2
            Object.assign(div.style,obj);
        }
    }
</script>
</html>